<template>
  <div>
    <div class="search">
      <el-input placeholder="查询内容" prefix-icon="el-icon-search" v-model="search">
      </el-input>
      <el-button type="primary" @click="getFilter">查询</el-button>
    </div>
    <div class="usertable">
      <el-table :data="userList" style="width: 100%">
        <el-table-column fixed prop="id" label="序号" width="180">
        </el-table-column>
        <el-table-column fixed prop="username" label="用户名" width="150">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="100">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="100">
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="100">
        </el-table-column>
        <el-table-column prop="flag" label="禁用解禁" width="120">
          <template slot-scope="scope">
            <el-button @click="handleFlag(scope.row.id)" v-if="scope.row.flag === true" size="small">禁用</el-button>
            <el-button @click="handleFlag(scope.row.id)" v-else size="small">解禁</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="handleReset(scope.row.id)" size="small">重置密码</el-button>
            <el-button @click="handleDelete(scope.row.id)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>
<script>
export default {
  name: 'index',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      search: '',
      userList: []
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      const user = JSON.parse(sessionStorage.getItem('user'))
      this.$http.get(`/users/backend/list?id=${user.id}`).then(res => {
        if (res.data.code === 1) {
          this.userList = res.data.list
        }
      })
    },
    getFilter() {
      const user = JSON.parse(sessionStorage.getItem('user'))
      this.$http.get(`/users/backend/search?id=${user.id}&searchStr=${this.search}`).then(res => {
        if (res.data.code === 1) {
          this.userList = res.data.list
        }
      })
    },
    handleDelete(id) {
      const user = JSON.parse(sessionStorage.getItem('user'))
      this.$http.post('/users/backend/del', { id: user.id, uid: id }).then(res=>{
        if(res.data.code===1){
          this.$message(res.data.message)
          this.getList()
        }else{
          this.$message('删除失败')
        }
      })
    },
    handleFlag(id){
      const user = JSON.parse(sessionStorage.getItem('user'))
      this.$http.post('/users/backend/flag', { id: user.id, uid: id }).then(res=>{
        if(res.data.code===1){
          this.$message(res.data.message)
          this.getList()
        }else{
          this.$message('操作失败')
        }
      })
    },
    handleReset(id){
      const userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
      this.$http.post('/users/backend/reset', { id: userinfo.id, uid: id }).then(res=>{
        if(res.data.code===1){
          this.$message(res.data.message)
          this.getList()
        }else{
          this.$message('操作失败')
        }
      })
    }
  }
};
</script>
<style scoped>
.search {
  display: flex;
  align-items: center;
  margin: 24px;
  width: 500px;
}

.usertable {
  margin: 0 24px 24px;
}
</style>